import React, { useState } from 'react'
import {
  Form,
  Input,
  Button,
 
} from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import axios from 'axios'
function Index() {
  const navigate = useNavigate()
    const onFinish = async(values) => {
      const res = await axios.post('/api/login', values)
      const {code,data,message}=res.data
         navigate('/')
  }
  const [flag,setFlag] =useState ('')
  const [time,setTime] =useState (5)
  const [yz,setYz] =useState (false)
  const tzm = () => {
       setYz(true)
    const ress = setInterval(() => {
      setTime(prove => {
        if (prove == 0)
        {
          setYz(false)
          clearInterval(yz)
          setFlag(Math.random().toString().slice(2, 6))
          return 5
        }
        return prove-1
        })
    }, 1000)
   
    }
  return (
    <div>
      <Form
          onFinish={onFinish}
        layout='horizontal'
        footer={
          <Button block type='submit' color='primary' size='large' onClick={()=>navigate('/')}>
            提交
          </Button>
        }
      >
        <Form.Header>水平布局表单</Form.Header>
        <Form.Item
          name='username'
          label='用户名'
          rules={[{ required: true, message: '用户名不能为空' }]}
        >
          <Input  placeholder='请输入用户名' />
        </Form.Item>
        <Form.Item
          name='password'
          label='密码'
          rules={[{ required: true, message: '密码不能为空' }]}
        >
          <Input  placeholder='请输入密码' />
        </Form.Item>
        <Form.Item
          name='passwordok'
          label='验证码'
        >
          <Input placeholder='请输入验证码' value={flag} />
          <Button onClick={tzm} disabled={yz}>验证码{ time}</Button>
        </Form.Item>
     
        
      </Form>
    </div>
  )
}

export default Index
